body {
    width: 100%;
    min-width: 300px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    background-color: #ebebeb;
}


/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
    -webkit-touch-callout: none;
}


/* 公共样式 */

.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

li {
    list-style: none;
}

a {
    color: #666;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    vertical-align: middle;
}

div {
    /* css3 盒子模型 */
    box-sizing: border-box;
}


/* 顶部top区域开始 */

.top {
    height: 80px;
    background-color: #44b181;
}

.top ul {
    position: relative;
}

.top li:nth-child(1) {
    width: 12.5%;
}

.top li:nth-child(1)::before {
    content: "";
    position: absolute;
    display: block;
    top: 20px;
    left: 22px;
    background: url(../images/Back.png) no-repeat;
    width: 20px;
    height: 36px;
}

.top li:nth-child(2) {
    width: 12.5%;
    text-align: center;
    line-height: 80px;
    font-size: 22px;
}

.top li:nth-child(3) {
    width: 50%;
    text-align: center;
    line-height: 80px;
    font-size: 26px;
}

.top li:nth-child(4) {
    width: 25%;
}

.top li:nth-child(4)::before {
    content: "";
    position: absolute;
    display: block;
    top: 34px;
    right: 20px;
    background: url(../images/更多.png) no-repeat;
    width: 52px;
    height: 12px;
}

.top ul li {
    float: left;
    height: 80px;
    color: white;
}


/* header区域开始 */

.header {
    height: 68px;
}

.header ul li {
    float: left;
    font-size: 16px;
    text-align: center;
    height: 68px;
    line-height: 68px;
}

.header ul li:hover {
    overflow: hidden;
    border-bottom: 2px solid #43b180;
}

.header li:nth-child(1) {
    width: 33.33%;
}

.header li:nth-child(2) {
    width: 33.33%;
}

.header li:nth-child(3) {
    width: 33.33%;
}

.header ul {
    position: relative;
}

.header li:nth-child(3)::before {
    content: "";
    position: absolute;
    display: block;
    top: 16px;
    right: 22px;
    background: url(../images/sousuo.png) no-repeat;
    width: 33px;
    height: 33px;
}

.banner {
    height: 322px;
}

.banner img {
    width: 100%;
}

.text1 {
    position: relative;
    height: 254px;
}

.text1 .qiu1 {
    height: 80px;
    width: 80px;
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: transparent;
    background: url(../images/足球.png) no-repeat;
}

.text1 .mf1 {
    height: 60px;
    width: 286px;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: #44b181;
}

.text1 .mf1:before {
    content: "";
    position: absolute;
    display: block;
    bottom: 0px;
    left: 0px;
    background: url(../images/信号.png) no-repeat;
    width: 20px;
    height: 28px;
}

.text2 {
    height: 254px;
}

.text2 .qiu2 {
    height: 80px;
    width: 80px;
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: transparent;
    background: url(../images/足球.png) no-repeat;
}


/* 固定栏目部分 */

.nav {
    position: fixed;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: #f5f7f9;
    min-width: 300px;
    max-width: 640px;
}

.nav ul li {
    position: relative;
    float: left;
    font-size: 16px;
    color: #666;
}

.nav li:nth-child(1) {
    width: 25%;
    line-height: 150px;
    text-align: center;
}

.nav li:nth-child(1)::before {
    content: "";
    position: absolute;
    display: block;
    top: 22px;
    left: 62px;
    background: url(../images/榜单.png) no-repeat;
    width: 32px;
    height: 27px;
}

.nav li:nth-child(2) {
    width: 25%;
    line-height: 150px;
    text-align: center;
}

.nav li:nth-child(2)::before {
    content: "";
    position: absolute;
    display: block;
    top: 22px;
    left: 223px;
    background: url(../images/收听.png) no-repeat;
    width: 34px;
    height: 27px;
}

.nav li:nth-child(3) {
    width: 25%;
    line-height: 150px;
    text-align: center;
}

.nav li:nth-child(3)::before {
    content: "";
    position: absolute;
    display: block;
    top: 22px;
    right: 223px;
    background: url(../images/发现.png) no-repeat;
    width: 32px;
    height: 32px;
}

.nav li:nth-child(4) {
    width: 25%;
    line-height: 150px;
    text-align: center;
}

.nav li:nth-child(4)::before {
    content: "";
    position: absolute;
    display: block;
    top: 22px;
    right: 63px;
    background: url(../images/我的.png) no-repeat;
    width: 32px;
    height: 35px;
}